<template>
	<view class="trading">
		<u-sticky offset-top="0" style="background: #FFFFFF;top:0">
			<u-tabs :list="tabList" :is-scroll="false" :scrollable="false" :current="active"
				@change="onChange"></u-tabs>
		</u-sticky>
		<scroll-view scroll-y="true" class="l-list" @scrolltolower="scrolltolower">
			<view class="l-item" v-for="(item,index) in  orderList" :key="index">
				<view class="head flex-between">
					<view class="lt flex">
						<text :class="item.type == 1 ? 'sell' : 'buy'">{{item.type == 1 ? $t('otc.name9') : $t('otc.name8')}}</text>
						<text class="currency">{{item.wallet_name}}</text>
						<!-- <view class="status">{{item.status | status}}</view> -->
					</view>
					<view class="rt">
						{{item.createtime}}
					</view>
				</view>
				<view class="box">
					<view class="">
						<view class="money">
							<text class="text">{{item.money}}</text>
						</view>
						<view class="l-item-font row">
							<view class="title">{{$t('otc.name5')}}：</view>
							<view class="font">{{item.num * 1}}</view>
						</view>
						<view class="l-item-font row">
							<view class="title">{{$t('otc.name11')}}：</view>
							<view class="font">{{item.money}}</view>
						</view>
						<view class="l-item-font row">
							<view class="title">{{$t('otc.name14')}}：</view>
							<view class="font">{{item.price}}</view>
						</view>
					</view>
					<view class="foo flex-between">
						<view class="flex lt">
							<!-- <view class="">
								11
							</view>
							<view class="">
								支付宝
							</view> -->
						</view>
						<view class="flex">
							<!-- <u-button style="width: 150rpx;margin: 0 10rpx;" shape="circle" type="success" size="small"
								@click="goOrder(item)" v-if="item.status == 1&&active!=1">{{$t('otc.name24')}}
							</u-button> -->
							<u-button style="width: 80px;margin: 0 10rpx;" shape="circle" type="primary" size="small"
								@click="cancelOrder(item)" v-if="item.status == 1 && active!=1 || active==0">{{$t('otc.name25')}}
							</u-button>
							<u-button style="width: 150rpx;margin: 0 10rpx;" shape="circle" type="primary" size="small"
								@click="configOrder(item)" v-if="item.status == 2 && item.type == 1">{{$t('otc.name26')}}
							</u-button>
							<u-button style="width: 150rpx;margin: 0 10rpx;" shape="circle" type="primary" size="smal7"
								@click="LookPZ(item)" v-if="item.status == 2">{{$t('otc.name24')}}
							</u-button>
							<!-- <u-button style="width: 150rpx;margin: 0 10rpx;" shape="circle" type="primary" size="small"
								@click="goOrder(item)" v-if="item.status == 3">{{$t('otc.name28')}}
							</u-button> -->
						</view>
					</view>
				</view>
				<!-- <view class="" style="position: absolute;right: 30rpx; top: 30rpx;font-size: 28rpx;color: red;">
					{{item.type == 1 ? '转赠' : '收赠'}}
				</view> -->
				<!-- <view class="l-item-font row">
					<view class="title">单价：</view>
					<view class="font">{{item.money}}</view>
				</view>
				<view class="l-item-font row">
					<view class="title">数量：</view>
					<view class="font">{{item.num * 1}}</view>
				</view>
				<view class="l-item-font row">
					<view class="title">总额：</view>
					<view class="font">{{item.price}}</view>
				</view> -->

				<!-- <view class="l-item-font row bu">
					<u-button type="success" size="small" @click="goOrder(item)" v-if="item.status == 1&&active!=1">去支付
					</u-button>
					<u-button type="primary" size="small" @click="cancelOrder(item)" v-if="item.status == 1 && active!=1 || active==0">取消订单
					</u-button>
					<u-button type="primary" size="small" @click="configOrder(item)" v-if="item.status == 2 && item.type == 1" >确认收款
					</u-button>
					<u-button type="primary" size="small" @click="LookPZ(item)" v-if="item.status == 2">查看凭证
					</u-button>
					<u-button type="primary" size="small" @click="goOrder(item)" v-if="item.status == 3">查看详情
					</u-button>
				</view> -->

			</view>
		</scroll-view>
		<u-popup :show="show" mode="center" @close="show = false">
			<view class="tab_box" :style="{ width: '300px',padding:'5px 0' }">
				<image :src="$fun.imgUrl(imgSrc)" style="margin: 50px; width: 200px; height: 200px" alt="" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		filters: {
			status(val) {
				return dataStatus[val].name
			}
		},
		data() {
			return {
				page: {
					page: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					limit: 10 // 每页数据的数量
				},
				active: 0,
				// 弹框
				show: false,
				// 图片
				imgSrc: "",
				// tab
				// 购买数据
				orderList: [],
				currency: [],
				tabList :[{
						name: this.$t('otc.name29'),
						state: 0
					},
					// {
					// 	name: "待支付",
					// 	state: 1
					// },
					// {
					// 	name: "待打款",
					// 	state: 2
					// },
					// {
					// 	name: "待确认",
					// 	state: 3
					// },
					{
						name: this.$t('user.name8'),
						state: 4
					},
					{
						name:this.$t('otc.name31'),
						state: 5
					},
				]
			}
		},
		computed: {
			statusBarHeight() {
				return this.systemInfo.statusBarHeight;
			},

			navigationBarHeight() {
				return this.systemInfo.navigationBarHeight;
			},
			marginTop() {
				//#ifdef APP-PLUS
				return 0
				// #endif
				return this.systemInfo.navigationBarHeight;
			},
			headerHeight() {
				return (750 / uni.upx2px(750)) * (this.systemInfo.navigationBarHeight + this.systemInfo.statusBarHeight);
			}
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			// this.page.page += 1
			// if (this.page.page != 0) {
			// 	this.getList()
			// }
		},
		onReady() {
			uni.setNavigationBarTitle({
				title:this.$t('otc.name32')
			})
		},
		onLoad() {
			
		},
		methods: {
			scrolltolower(){
				this.page.page += 1
				if (this.page.page != 0) {
					this.getList()
				}
			},
			//初始化
			init() {
				this.orderList = []
				this.getList()
			},
			onChange(e) {
				this.active = e.index;
				this.page.page = 1
				this.orderList = []
				this.getList()
			},
			// 获取列表
			async getList() {
				const data = {
					page: this.page.page,
					limit: this.page.limit,
					status: this.tabList[this.active].state
				};
				const res = await this.$fun.ajax.post('/otc/otclist', {
					...data
				});
				if (res.code == 1) {
					const curList = res.data;
					if (this.page.num === 1) {
						this.orderList = [];
						//第一页清空数据重载
						if (curList.length > 0) {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 200
							});
						}
					}
					this.orderList = this.orderList.concat(curList); //追加新数据
				}
			},
			// 取消订单
			cancelOrder(item) {
				uni.showModal({
					content: this.$t('otc.name18'),
					success: (e) => {
						if (e.confirm) {
							let prams = {
								id: item.id
							}
							this.$fun.ajax.post('/otc/delorder', {
								...prams
							}).then(res => {
								this.$fun.msg(res.msg)
								if (res.code == 1) {
									this.orderList = []
									this.page.page = 1
									this.getList()
								}
							})

						}
					}
				});
			},
			// 确认收款
			configOrder(item) {
				uni.showModal({
					content:  this.$t('otc.name30'),
					success: (e) => {
						if (e.confirm) {
							let prams = {
								id: item.id
							}
							this.$fun.ajax.post('/otc/yesorder', {
								...prams
							}).then(res => {
								this.$fun.msg(res.msg)
								if (res.code == 1) {
									this.orderList = []
									this.page.page = 1
									this.getList()
								}
							})

						}
					}
				});
			},
			// 查看凭证
			LookPZ(item) {
				this.imgSrc = item.image;
				this.show = true;
			},
			goOrder(item) {
				// this.$api.otc_dakuan({
				// 	id: item.id
				// }).then(res => {
				// 	if (res.code == 1) {
				uni.navigateTo({
					url: `/pageB/otcCenter/pay?id=${item.id}`
					// 		})
					// 	} else {
					// 		this.$fun.msg(res.msg)
					// 	}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #F5F5F5;
	}

	.top_flex {
		width: 100%;
		background: #FFFFFF;
		position: fixed;
		// #ifdef APP-PLUS
		top: 0rpx;
		// #endif
		// #ifdef H5
		top: 88rpx;
		// #endif
		z-index: 100;
	}
	.trading{
		height: 100%;
	}

	.l-list {
		height:calc( 100% - 120rpx);
		width: 100%;
		margin-top: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.l-item {
			position: relative;
			background-color: #ffffff;
			border-radius: 10rpx;
			// padding-bottom: 24rpx;
			margin-bottom: 20rpx;

			.buy {
				color: #40C857;
			}

			.sell {
				color: #FF972E;
			}

			.head {
				height: 64rpx;
				border-bottom: 1rpx solid #EAEAEA;
				padding: 0 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #333333;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;

				.lt {
					.type {
						color: #40C857;
					}

					.currency {
						margin: 0 10rpx;
					}

					.status {
						width: 74rpx;
						height: 38rpx;
						background: #EAEAEA;
						border-radius: 4rpx;
						font-size: 18rpx;
						color: #CCCCCC;
						line-height: 38rpx;
						text-align: center;
					}
				}

				.rt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
					text-align: right;
					font-style: normal;
				}
			}

			.box {
				padding: 30rpx 20rpx;

				.foo {
					.lt {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
					}
				}
			}

			.l-item-title {
				width: 100%;
				padding-bottom: 30rpx;
			}

			.l-item-font {
				width: 100%;
				height: 40rpx;

				button {
					width: 200rpx;
				}

				.status {
					width: 100rpx;
					height: 40rpx;
					background-color: #E4F8FD;
					border: 1rpx solid #A6C2FF;
					border-radius: 10rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #4A81F9;
					margin-left: 20rpx;

					&.two {
						background-color: #F7F7F7;
						border: 1rpx solid #E9E9E9;
						color: #999999;
					}
				}

				.u-btn--primary {
					color: #fff;
					border-color: #2979ff;
					background-color: #2979ff !important;

				}

				.u-btn--success {
					color: #ffffff;
					border-color: #19be6b;
					background-color: #19be6b !important;
				}

				.u-btn {
					margin-right: 10rpx;
				}
			}

			.bu {
				display: flex;
				justify-content: flex-end;
			}

			.title {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}

			.font {
				font-size: 26rpx;
				font-weight: 500;
				color: #000;
			}

			.money {
				font-size: 24rpx;

				.text {
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
					font-weight: 600;
				}

			}

			.font2 {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}

			.btn-group {
				justify-content: flex-end;
				padding-right: 30rpx;

				.btn {
					width: 200rpx;
					height: 70rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #fff;
					background-color: $base-color;
					border-radius: 10rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		// padding: 0 16px;
		height: 60px;

		.tit {
			width: 200rpx;
		}
	}
</style>